<template>
    <div id="index_s">
        <el-tabs type="border-card">
            <!--*************【点餐】********************-->
            <el-tab-pane label="点  餐">
                <!--===========1.整体菜品展示区域-->
                <div id="order">
                    <!-- ***********搜索菜品*******-->
                    <el-row style="margin-bottom: 20px;">
                        <el-col :span="6">
                            <el-input placeholder="请输入内容" size="small" v-model="query.condition">
                                <el-button slot="append" icon="el-icon-search" size="small" @click="mySearch"></el-button>
                            </el-input>
                        </el-col>
                        <el-button type="primary" style="float:right" :flag="true"
                                   size="small" plain @click="detail">点餐完成</el-button>
                    </el-row>
                    <!--************菜品表*********-->
                    <el-table size="small" :cell-style="cell_style" :header-cell-style="header_style"
                              border style="width: 100%" :data="tableDish">
                        <el-table-column prop="id" label="菜品编号"></el-table-column>
                        <el-table-column prop="picture" label="菜品图片" width="180">
                            <template slot-scope="scope">
                                <img :src="'http://106.14.138.71:8080/rms/'+scope.row.picture" alt="" width="40" height="40">
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="菜品名称" width="180"></el-table-column>
                        <el-table-column prop="price" label="菜品单价"></el-table-column>
                        <el-table-column prop="classifyId" label="菜品分类"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary"
                                           size="mini"
                                           @click="handleAdd(scope.$index, scope.row)">添加</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--************分页***********-->
                    <el-pagination background layout="prev, pager, next"
                                   @current-change="changePage"
                                   :current-page="query.currentPage"
                                   :page-size="query.pageSize"
                                   :total="page.totalSize">
                    </el-pagination>
                </div>
                <!--===========2.添加的菜品详情区域-->
                 <div id="details">
                     <hr style="margin-bottom: 20px">
                     <span>订 单 号 ：</span>
                     <el-input placeholder="系统生成的订单号" size="small" v-model="orderId" disabled></el-input>
                     <br>
                     <span>餐 桌 号 ：</span>
                     <el-input placeholder="请输入餐桌号" size="small" v-model="seatNum" disabled></el-input>
                     <br>
                     <span>总 金 额 ：</span>
                     <el-input placeholder="总计" size="small" v-model="totalPrice" disabled></el-input>
                     <el-table border style="width: 65%" size="small" :cell-style="cell_style"
                               :header-cell-style="header_style" :data="detailsList">
                         <el-table-column label="菜品名称" width="180" prop="dishesMainId"></el-table-column>
                         <el-table-column label="单价" width="180" prop="price"></el-table-column>
                         <el-table-column label="数量" width="180" prop="number"></el-table-column>
                         <el-table-column label="操作" prop="">
                             <template slot-scope="scope">
                                 <el-button type="primary" icon="el-icon-minus"
                                            size="mini" plain @click="sub(scope.$index,scope.row)"></el-button>
                                 <el-button type="primary" icon="el-icon-plus" class="addBtn"
                                            size="mini" plain @click="add(scope.row)"></el-button>
                             </template>
                         </el-table-column>
                     </el-table>
                     <div id="btn">
                         <el-button type="primary" plain @click="dialogVisible = true">会员支付</el-button>
                         <el-button type="success" plain @click="dialogVisible1 = true">非会员支付</el-button>
                         <el-button type="info" plain @click="cancel">取  消</el-button>
                     </div>
                     <!--提交后的模态框-->
                     <el-dialog
                             title="会员提交信息"
                             :visible.sync="dialogVisible"
                             width="30%">
                         <i class="el-icon-food"></i>
                         <span>点餐完成，是否确定提交？</span>
                         <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="vipSubmit">确 定</el-button>
                         </span>
                     </el-dialog>
                     <el-dialog
                             title="普通用户提交信息"
                             :visible.sync="dialogVisible1"
                             width="30%">
                         <i class="el-icon-food"></i>
                         <span>点餐完成，是否确定提交？</span>
                         <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="fvipSubmit">确 定</el-button>
                         </span>
                     </el-dialog>
                 </div>
            </el-tab-pane>
            <!--*************【外卖】********************-->
            <el-tab-pane label="外  卖">
                <div id="take">
                    <!--搜索区域-->
                    <!--<el-row style="margin-bottom: 20px;">
                        <el-col :span="6">
                            <el-input placeholder="请输入内容" size="small">
                                <el-button slot="append" icon="el-icon-search"
                                           size="small"></el-button>
                            </el-input>
                        </el-col>
                    </el-row>-->
                    <!--外卖列表区域-->
                    <el-table  border style="width: 100%"
                            :cell-style="cell_style"
                            :header-cell-style="header_style"
                            size="small" :data="tableTake">
                        <el-table-column prop="orderId" label="订单号" width="150"></el-table-column>
                        <el-table-column prop="createTime" label="订单时间" width="150"></el-table-column>
                        <el-table-column prop="name" label="点餐人姓名"></el-table-column>
                        <el-table-column prop="telephone" label="联系电话"></el-table-column>
                        <el-table-column prop="orderType" label="订单状态"></el-table-column>
                        <el-table-column prop="address" label="配送地址"></el-table-column>
                        <el-table-column prop="details[0].dishesMainId" label="菜品"></el-table-column>
                        <el-table-column prop="totalPrice" label="订单消费"></el-table-column>
                    </el-table>
                    <!--                    外卖分页区域-->
                    <el-pagination background layout="prev, pager, next"
                                   @current-change="changePage2"
                                   :current-page="query2.currentPage"
                                   :page-size="5"
                                   :total="page2.totalSize">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import axios from '../../http/http'
    import * as api from '../../http/api'
    import bus from '../../bus'
    export default {
        name: "syn_index",
        data(){
            return {
                query:{condition:'',currentPage:1, pageSize:5},
                page:{totalSize:0},
                tableDish:[],
                query2:{condition:'',currentPage:1, pageSize:5},
                page2:{totalSize:0},
                tableTake:[],
                detailsList:[],
                flag:true,
                orderId:'',
                seatArr:[],
                myNum:1,
                dialogVisible:false,
                dialogVisible1:false,
                // seatNum:0,
                index:0,
                myData:{}
            }
        },
        methods:{
            async getMenu() {
                const { data: res } = await axios({
                    method:'get',
                    url:api.menu,
                    params:this.query
                });
                this.page = res.pager;
                this.tableDish = res.info;
                // console.log(res.info)
            },
            changePage(val){
                this.query.currentPage = val;
                this.getMenu()
            },
            //================以上是点餐区域
            async getTake() {
                const { data: res } = await axios({
                    method:'get',
                    url:api.getTakeData,
                    params:this.query2
                });
                this.page2 = res.pager;
                this.tableTake = res.info;
            },
            changePage2(val){
                this.query2.currentPage = val;
                this.getTake()
            },
            //===================点餐详情展示区域
            detail(){
                let detail = document.getElementById('details');
                if(this.flag){
                    detail.style.display = 'block';
                    this.flag = false;
                }else{
                    detail.style.display = 'none';
                    this.flag = true;
                }
            },
            add(row){
                if(row.number<5){
                    row.number++;
                }
                if(row.number===5){
                    row.number = 5
                }
            },
            sub(index,row){
                if(row.number>0){
                    row.number--;
                }
                if(row.number===0){
                    this.detailsList.splice(index,1)
                }
            },
            //添加菜品
            handleAdd(index, row) {
                this.detailsList.push(
                    {dishesMainId:row.name, price:row.price,number:this.myNum}
                );
            },
            // 获取订单号
            getOrderId(){
                return axios({
                    url:'rms/front/trade/order',
                    method:'get'
                }).then(res=>{
                    this.orderId = res.data.info;
                    // console.log(this.orderId);
                })
            },
            //获得餐桌号
            getSeatId(){
                return axios({
                    url:'rms/front/trade/freeSeat',
                    method:'get'
                }).then(res=>{
                    this.seatArr = res.data.info;
                })
            },
               // 提交数据
            vipSubmit(){
                let postData={

                    "address":'string',
                    "details":this.detailsList,
                    "name": "string",
                    "orderId": this.orderId,
                    "orderType": 0,
                    "seatsId": this.seatNum,
                    "telephone": "string",
                    "totalPrice": this.totalPrice
                };
                this.myData = postData;
                return axios({
                        url:'rms/front/trade/commit',
                        method:'post',
                        headers:{
                            'Content-type': 'application/json'
                        },
                        data:postData,
                    }).then(res=>{
                       // console.log(res.config);
                       this.dialogVisible = false;
                       this.$message({
                           type: 'success',
                           message: '点餐成功!'
                       });
                         this.seatArr[this.index].state = 1; //点餐成功后，餐桌变为占用状态
                         this.getMenu();
                        let detail = document.getElementById('details');
                        detail.style.display = 'none';
                        this.$router.push('/index/j_hyzf')
                     });
            },
            fvipSubmit(){
                let postData={
                    "address":'string',
                    "details":this.detailsList,
                    "name": "string",
                    "orderId": this.orderId,
                    "orderType": 0,
                    "seatsId": this.seatNum,
                    "telephone": "string",
                    "totalPrice": this.totalPrice
                };
                this.myData = postData;
                return axios({
                    url:'rms/front/trade/commit',
                    method:'post',
                    headers:{
                        'Content-type': 'application/json'
                    },
                    data:postData,
                }).then(res=>{
                    // console.log(res.config);
                    this.dialogVisible1 = false;
                    this.$message({
                        type: 'success',
                        message: '点餐成功!'
                    });
                    this.seatArr[this.index].state = 1; //点餐成功后，餐桌变为占用状态
                    this.getMenu();
                    let detail = document.getElementById('details');
                    detail.style.display = 'none';
                    this.$router.push('/index/j_fhyzf')
                });
            },
            cancel(){
                let detail = document.getElementById('details');
                detail.style.display = 'none';
            },
            cell_style(row, column, rowIndex, columnIndex) {
                return ' text-align: center';
            },
            header_style(row, rowIndex) {
                return ' text-align: center;';
            },
            //查询功能
            mySearch(){
                return axios({
                    url:api.menu,
                    method:'get',
                    params:this.query
                }).then(res=>{
                    this.page = res.data.pager;
                    this.tableDish = res.data.info;
                })
            }
        },
        created() {
            this.getMenu();
            this.getTake();
            this.getOrderId();
            this.getSeatId();
        },
        computed:{
            seatNum(){
                for(let i=0;i<this.seatArr.length;i++){
                    this.index = Math.floor((Math.random()*this.seatArr.length));
                    // console.log('random---',random);
                    if(this.seatArr[this.index].state===0){
                        // console.log('number---',this.seatArr[random].number);
                        return this.seatArr[this.index].number
                    }
                }
            },
            totalPrice(){
                let money = 0;
                for(let i=0;i<this.detailsList.length;i++){
                    money += this.detailsList[i].number * this.detailsList[i].price
                }
                return money;
            }
        },
        beforeDestroy() {
            bus.$emit('getData',this.myData);
        }
    }
</script>
<style scoped lang="less">
    #order{
        overflow: hidden;
        /*height:500px;*/
    }
    .el-pagination{
        margin-top: 50px;
    }
    #details{
        display: none;
        text-align: left;
        /*border:1px solid red;*/
        margin-top: 30px;
        .el-input{
            width:25%;
            margin-bottom: 20px;
        }
        #btn{
            margin-top:20px;
            button:nth-child(1){
                margin:0 50px 0 400px;
            };
            button:nth-child(2){
                margin-right:50px;
            };
        }
    }

</style>
